<template>
  <view class="indexBody">
    <custom-navbar :immersive="true" title="个人资料" color="#333"> </custom-navbar>
    <view :style="{ paddingTop: `${navbarHeight}px` }"></view>
    <view class="content_model">
      <view class="content_model_row">
        <view class="content_model_row_txt">头像</view>
        <button class="content_model_row_btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="content_model_row_btn_avatar" :src="avatarUrl" mode="aspectFill" />
          <uni-icons type="right" size="20" />
        </button>
      </view>
      <view class="content_model_line"></view>
      <view class="content_model_row" @click="goChangeName">
        <view class="content_model_row_txt">名字</view>
        <view class="content_model_row_value">{{ userName }}</view>
        <uni-icons type="right" size="20" />
      </view>
    </view>
  </view>
</template>

<script>
import { getToken, getUserInfo, setUserInfo, clearToken, clearUserInfo } from '@/service/auth.js'

import navbarMixin from '@/mxins/navbar.js'
import { infoModify } from '@/service/api/mine.js'
export default {
  mixins: [navbarMixin],
  components: {},
  data() {
    return {
      user: {},
      avatarUrl: '',
      userName: '',
    }
  },
  onLoad() {
    console.log('onload')
  },
  onShow() {
    const data = getUserInfo()
    this.user = JSON.parse(data)
    if (this.user && this.user.avatar) {
      this.avatarUrl = this.user.avatar
    } else {
      this.avatarUrl = require('@/static/image/avatar.png')
    }
    if (this.user && this.user.userName) {
      this.userName = this.user.userName
    }
  },
  created() {},

  methods: {
    onChooseAvatar(e) {
      this.avatarUrl = e.detail.avatarUrl
      // 可以将头像URL上传到服务器或进行其他处理
      infoModify({ avatar: this.avatarUrl })
        .then(res => {
          console.log('res', res)
          this.uniShowToast(res.msg)
          this.user.avatar = this.avatarUrl
          setUserInfo(this.user)
        })
        .catch(err => {
          console.log('err', err)
          this.uniShowToast(err.msg)
        })
    },
    goChangeName() {
      uni.navigateTo({
        url: '/pageShopping/changeName/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.indexBody {
  position: relative;
  background: linear-gradient(to bottom, #edfff1 10%, #f6f6f6 48%);
  width: 100vw;

  .content_model {
    background-color: white;
    padding: 0 20rpx;

    &_row {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      &_btn {
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        position: relative;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden; /* 防止图片溢出 */
        &_avatar {
          width: 70rpx;
          height: 70rpx;

          border-radius: 50%;
        }
      }
      &_btn::after {
        border: none; /* 去除微信小程序的默认边框 */
      }
      &_txt {
        margin-left: 20rpx;
        flex: 1;
      }
    }
    &_line {
      height: 1rpx;
      background-color: #f5f5f5;
    }
  }
}
</style>
